import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Card, List } from "antd";
import * as React from "react";
import { Link } from "react-router-dom";
import { largeCardStyle } from "../../component/largeCard";

import { Docs } from "../../type/CommonData";

const styles = (theme: Theme) =>
  createStyles({
    root: largeCardStyle,
    dosImage: {
      width: "6vw",
      height: "11vh"
    },
    descriptionTextStyle: {
      "& p": {
        textOverflow: "ellipsis",
        overflow: "hidden",
        whiteSpace: "nowrap"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  doctorImg: string;
  data: Docs[];
}

class DoctorList extends React.Component<Iprops> {
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Card
          title="医生列表"
          extra={
            <Link to={"/medical-resource/doctor"} style={{ fontSize: "10px" }}>
              更多>>
            </Link>
          }
          style={{ width: "100%" }}
          className={classes.root}
        >
          <List
            size="small"
            grid={{ gutter: 16, column: 4 }}
            dataSource={this.props.data}
            renderItem={(item: Docs) => (
              <List.Item>
                <Link to={{ pathname: "/detail-doctor", state: item }}>
                  <Card hoverable={true} bordered={false}>
                    <Card.Meta
                      avatar={
                        <img
                          src={
                            item.detail.images &&
                            item.detail.images[0] &&
                            item.detail.images[0].url
                              ? item.detail.images[0].url
                              : this.props.doctorImg
                          }
                          className={classes.dosImage}
                        />
                      }
                      title={
                        <span title={item.name}>
                          {item.name}
                          <span
                            style={{ fontSize: "6px", marginLeft: "10px" }}
                            title={item.title}
                          >
                            {item.title}
                          </span>
                        </span>
                      }
                      description={
                        <div className={classes.descriptionTextStyle}>
                          <p
                            style={{ fontWeight: "bold" }}
                            title={item.hospital}
                          >
                            {item.hospital}
                          </p>
                          <p title={item.depart}>{item.depart}</p>
                          {/*<Link key={item.name} to={"/doctor-detail"}>
                                                    <Button size={"small"} type="primary" ghost={true} style={{ fontSize: "6px",float:"right",color:"rgb(254,196,23)",borderColor:"rgb(254,196,23)"}}>预约挂号</Button>
                                                </Link>*/}
                        </div>
                      }
                    />
                  </Card>
                </Link>
              </List.Item>
            )}
          />
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(DoctorList);
